<template>
    <div class="footer">

        <div class="footer-hd">
            <p>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">阿里巴巴集团</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">阿里巴巴国际站</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">阿里巴巴中国站</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">全球速卖通</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">淘宝网</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">天猫</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">聚划算</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">一淘</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">阿里妈妈</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">飞猪</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">虾米</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">阿里云计算</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">云OS</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">万网</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">支付宝</a>
                <b>|</b>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">来往</a>
            </p>
        </div>
        <div class="footer-bd">
            <p>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">关于淘宝</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">合作伙伴</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">营销中心</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">廉正举报</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">联系客服</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">开放平台</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">诚征英才</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">联系我们</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">网站地图</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">法律声明</a>
                <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">隐私权政策</a>
                <em>© 2019 Taobao.com 版权所有</em>
            </p>
            <p>
                <span>网络文化经营许可证：浙网文[2016]0132-032号</span>
                <b>|</b>
                <span>增值电信业务经营许可证：浙B2-20080224-1</span>
                <b>|</b>
                <span>信息网络传播视听节目许可证：1109364号</span>
            </p>
        </div>
        <div class="footer-ft">
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;">
                <img width="36" height="36" src="https://assets.alicdn.com/apps/login/static/css/images/wj.gif">
            </a>
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;" class="mod mod-a"></a>
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;"
               class="mod mod-b"></a>
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;" class="mod mod-c"></a>
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;"
               class="mod mod-d"></a>
            <a @click="$store.dispatch('invalidBtnAlertAction')" href="javascript:;" class="mod mod-e"></a>
        </div>
        <!-- #footer END -->
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped lang="less">
    *{
        font: 12px/3.0 "Microsoft YaHei", tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    }
    .footer {
        position: relative;
        margin: 60px auto 0;
        padding: 7px 0 9px;
        border-top: 1px solid #ddd;
        width: 1200px;

        .footer-hd {
            p {
                margin-bottom: 8px;
                line-height: 27px;
                border-bottom: 1px solid #ddd;
                padding-bottom: 8px;
                overflow: hidden;

                a {
                    display: inline;
                    float: left;
                    margin: 0 4px;
                    white-space: nowrap;
                    color: #6c6c6c;
                    text-decoration: none;
                }
                b {
                    display: inline;
                    float: left;
                    margin: 0 3px;
                    font-weight: 400;
                    color: #ddd;
                }
            }
        }

        .footer-bd {
            p {
                padding-bottom: 8px;
                overflow: hidden;

                a {
                    display: inline;
                    float: left;
                    margin: 0 4px;
                    white-space: nowrap;
                    color: #6c6c6c;
                    text-decoration: none;
                }
                em {
                    display: inline;
                    float: left;
                    white-space: nowrap;
                    color: #9c9c9c;
                    margin-left: 30px;
                }

                b {
                    display: inline;
                    float: left;
                    margin: 0 3px;
                    font-weight: 400;
                    color: #ddd;
                }

                span{
                    display: inline;
                    float: left;
                    white-space: nowrap;
                    color: #9c9c9c;
                    margin: 0 4px;
                }
            }
        }

        a:hover {
            color: #F40 !important;
            text-decoration: none;
        }
    }
</style>